<!DOCTYPE html>


<head>
    <title>在线选座</title>
    <meta charset="utf-8">
    <script src="js/jquery.min.js"></script>

    <link rel="stylesheet" href="./css/ticketing1.css"/>
    <link rel="stylesheet" href="./css/ticketing2.css"/>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/selectFile.css">
    <script src="js/detectLoginStatusTool.js"></script>

    <style>
        @font-face {
            font-family: stonefont;
            src: url('ad006ffb585cd3a6929608352c125aa83448.eot');
            src: url('ad006ffb585cd3a6929608352c125aa83448.eot?#iefix') format('embedded-opentype'),
            url('33a5e7d47762ff28039916f65316048c2288.woff') format('woff');
        }

        .stonefont {
            font-family: stonefont;
        }
    </style>
    <script src="js/logout.js"></script>
</head>

<body>


<header>
    <nav>
        <div id="loginControl">
            <!--            <ul>-->
            <!--                            <li><a href="index.html">首页</a></li>-->
            <!--            <li><a href="my_order.html">我的订单</a></li>-->
            <!--            <li id="loginState"><a href="login.html">注册/登录</a></li>-->
            <!--            <li id="logoutState"><a href="javascript: logout()">退出登录</a></li>-->
            <!--            <li><a href="#">联系我们</a></li>-->
            <!--            <div class="slider"></div>-->
            <!--            </ul>-->
        </div>
    </nav>
</header>
<!--<script src="js/detectLoginStatusTool.js"></script>-->


<div class="container" id="app" class="page-cinemas/seat">
    <div class="order-progress-bar">
        <div class="step first done">
            <span class="step-num">1</span>
            <div class="bar"></div>
            <span class="step-text">选择影片场次</span>
        </div>
        <div class="step done">
            <span class="step-num">2</span>
            <div class="bar"></div>
            <span class="step-text">选择座位</span>
        </div>
        <div class="step ">
            <span class="step-num">3</span>
            <div class="bar"></div>
            <span class="step-text">14分钟内付款</span>
        </div>
        <div class="step last ">
            <span class="step-num">4</span>
            <div class="bar"></div>
            <span class="step-text">影院取票观影</span>
        </div>
    </div>


    <div class="main clearfix">
        <div class="hall">
            <div class="seat-example">
                <div class="selectable-example example">
                    <span>可选座位</span>
                </div>
                <div class="sold-example example">
                    <span>已售座位</span>
                </div>
                <div class="selected-example example">
                    <span>已选座位</span>
                </div>
                <div class="couple-example example">
                    <span>情侣座位</span>
                </div>
            </div>


            <div class="seats-block" data-cols="10" data-section-id="1" data-section-name="普通"
                 data-seq-no="202112290660684">
                <div class="row-id-container">
                    <span class="row-id">1</span>
                    <span class="row-id">2</span>
                    <span class="row-id">3</span>
                    <span class="row-id">4</span>
                    <span class="row-id">5</span>
                    <span class="row-id">6</span>
                    <span class="row-id">7</span>
                    <span class="row-id">8</span>
                </div>

                <div class="seats-container">
                    <div class="screen-container">
                        <div class="screen">银幕中央</div>
                        <div class="c-screen-line"></div>
                    </div>

                    <div class="seats-wrapper">
                        <div class="row">
                            <span id="1_10" class="seat selectable" data-column-id="10" data-row-id="1"></span>
                            <span id="1_9" class="seat selectable" data-column-id="9" data-row-id="1"></span>
                            <span id="1_8" class="seat selectable" data-column-id="8" data-row-id="1"></span>
                            <span id="1_7" class="seat selectable" data-column-id="7" data-row-id="1"></span>
                            <span id="1_6" class="seat selectable" data-column-id="6" data-row-id="1"></span>
                            <span id="1_5" class="seat selectable" data-column-id="5" data-row-id="1"></span>
                            <span id="1_4" class="seat selectable" data-column-id="4" data-row-id="1"></span>
                            <span id="1_3" class="seat selectable" data-column-id="3" data-row-id="1"></span>
                            <span id="1_2" class="seat selectable" data-column-id="2" data-row-id="1"></span>
                            <span id="1_1" class="seat selectable" data-column-id="1" data-row-id="1"></span>
                        </div>
                        <div class="row">
                            <span id="2_9" class="seat selectable" data-column-id="9" data-row-id="2"></span>
                            <span id="2_8" class="seat selectable" data-column-id="8" data-row-id="2"></span>
                            <span id="2_7" class="seat selectable" data-column-id="7" data-row-id="2"></span>
                            <span id="2_6" class="seat selectable" data-column-id="6" data-row-id="2"></span>
                            <span id="2_5" class="seat selectable" data-column-id="5" data-row-id="2"></span>
                            <span id="2_4" class="seat selectable" data-column-id="4" data-row-id="2"></span>
                            <span id="2_3" class="seat selectable" data-column-id="3" data-row-id="2"></span>
                            <span id="2_2" class="seat selectable" data-column-id="2" data-row-id="2"></span>
                            <span id="2_1" class="seat selectable" data-column-id="1" data-row-id="2"></span>
                            <span class="seat empty" data-column-id="" data-row-id="2" data-st="E"></span>

                        </div>
                        <div class="row">
                            <span id="3_7" class="seat selectable" data-column-id="7" data-row-id="3"></span>
                            <span id="3_6" class="seat selectable" data-column-id="6" data-row-id="3"></span>
                            <span id="3_5" class="seat selectable" data-column-id="5" data-row-id="3"></span>
                            <span id="3_4" class="seat selectable" data-column-id="4" data-row-id="3"></span>
                            <span id="3_3" class="seat selectable" data-column-id="3" data-row-id="3"></span>
                            <span id="3_2" class="seat selectable" data-column-id="2" data-row-id="3"></span>
                            <span id="3_1" class="seat selectable" data-column-id="1" data-row-id="3"></span>
                            <span class="seat empty" data-column-id="" data-row-id="3" data-st="E"> </span>
                            <span class="seat empty" data-column-id="" data-row-id="3" data-st="E"> </span>
                            <span class="seat empty" data-column-id="" data-row-id="3" data-st="E"> </span>
                        </div>
                        <div class="row">
                            <span id="4_7" class="seat selectable" data-column-id="7" data-row-id="4"></span>
                            <span id="4_6" class="seat selectable" data-column-id="6" data-row-id="4"></span>
                            <span id="4_5" class="seat selectable" data-column-id="5" data-row-id="4"></span>
                            <span id="4_4" class="seat selectable" data-column-id="4" data-row-id="4"></span>
                            <span id="4_3" class="seat selectable" data-column-id="3" data-row-id="4"></span>
                            <span id="4_2" class="seat selectable" data-column-id="2" data-row-id="4"></span>
                            <span id="4_1" class="seat selectable" data-column-id="1" data-row-id="4"></span>
                            <span class="seat empty" data-column-id="" data-row-id="4" data-no="" data-st="E"></span>
                            <span class="seat empty" data-column-id="" data-row-id="4" data-no="" data-st="E"></span>
                            <span class="seat empty" data-column-id="" data-row-id="4" data-no="" data-st="E"></span>

                        </div>
                        <div class="row">
                            <span id="5_7" class="seat selectable" data-column-id="7" data-row-id="5"></span>
                            <span id="5_6" class="seat selectable" data-column-id="6" data-row-id="5"></span>
                            <span id="5_5" class="seat selectable" data-column-id="5" data-row-id="5"></span>
                            <span id="5_4" class="seat selectable" data-column-id="4" data-row-id="5"></span>
                            <span id="5_3" class="seat selectable" data-column-id="3" data-row-id="5"></span>
                            <span id="5_2" class="seat selectable" data-column-id="2" data-row-id="5"></span>
                            <span id="5_1" class="seat selectable" data-column-id="1" data-row-id="5"></span>
                            <span class="seat empty" data-column-id="" data-row-id="5" data-no="" data-st="E"> </span>
                            <span class="seat empty" data-column-id="" data-row-id="5" data-no="" data-st="E"> </span>
                            <span class="seat empty" data-column-id="" data-row-id="5" data-no="" data-st="E"></span>

                        </div>
                        <div class="row">
                            <span id="6_7" class="seat selectable" data-column-id="7" data-row-id="6"></span>
                            <span id="6_6" class="seat selectable" data-column-id="6" data-row-id="6"> </span>
                            <span id="6_5" class="seat selectable" data-column-id="5" data-row-id="6"></span>
                            <span id="6_4" class="seat selectable" data-column-id="4" data-row-id="6"></span>
                            <span id="6_3" class="seat selectable" data-column-id="3" data-row-id="6"></span>
                            <span id="6_2" class="seat selectable" data-column-id="2" data-row-id="6"></span>
                            <span id="6_1" class="seat selectable" data-column-id="1" data-row-id="6"></span>
                            <span class="seat empty" data-column-id="" data-row-id="6" data-no="" data-st="E"> </span>
                            <span class="seat empty" data-column-id="" data-row-id="6" data-no="" data-st="E"> </span>
                            <span class="seat empty" data-column-id="" data-row-id="6" data-no="" data-st="E"></span>
                        </div>
                        <div class="row">
                            <span id="7_9" class="seat selectable" data-column-id="9" data-row-id="7"> </span>
                            <span id="7_8" class="seat selectable" data-column-id="8" data-row-id="7"> </span>
                            <span id="7_7" class="seat selectable" data-column-id="7" data-row-id="7"> </span>
                            <span id="7_6" class="seat selectable" data-column-id="6" data-row-id="7"> </span>
                            <span id="7_5" class="seat selectable" data-column-id="5" data-row-id="7"> </span>
                            <span id="7_4" class="seat selectable" data-column-id="4" data-row-id="7"> </span>
                            <span id="7_3" class="seat selectable" data-column-id="3" data-row-id="7"> </span>
                            <span class="seat empty" data-column-id="" data-row-id="7" data-st="E"> </span>
                            <span class="seat sold" data-column-id="2" data-row-id="7" data-st="LK"> </span>
                            <span class="seat sold" data-column-id="1" data-row-id="7" data-st="LK"> </span>
                        </div>
                        <div class="row">
                            <span id="8_10" class="seat selectable" data-column-id="10" data-row-id="8"></span>
                            <span id="8_9" class="seat selectable" data-column-id="9" data-row-id="8"></span>
                            <span id="8_8" class="seat selectable" data-column-id="8" data-row-id="8"></span>
                            <span id="8_7" class="seat selectable" data-column-id="7" data-row-id="8"> </span>
                            <span id="8_6" class="seat selectable" data-column-id="6" data-row-id="8"></span>
                            <span id="8_5" class="seat selectable" data-column-id="5" data-row-id="8"></span>
                            <span id="8_4" class="seat selectable" data-column-id="4" data-row-id="8"></span>
                            <span id="8_3" class="seat selectable" data-column-id="3" data-row-id="8"></span>
                            <span id="8_2" class="seat selectable" data-column-id="2" data-row-id="8"></span>
                            <span id="8_1" class="seat selectable" data-column-id="1" data-row-id="8"></span>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="side">
            <div class="movie-info clearfix">
                <div class="poster">
                    <img id="cover" src="./img/刀剑神域.jpg">
                </div>
                <div class="content">
                    <p class="name text-ellipsis">-</p>
                    <div class="info-item">
                        <span>类型 :</span>
                        <span id="filmType" class="value">-</span>
                    </div>
                    <div class="info-item">
                        <span>时长 :</span>
                        <span id="fileTime" class="value">-</span>
                    </div>
                </div>
            </div>

            <div class="show-info">
                <div class="info-item">
                    <span>影院 :</span>
                    <span class="value text-ellipsis">万达影城 (南阳中泰IMAX店)</span>
                </div>
                <div class="info-item">
                    <span>影厅 :</span>
                    <span id="filmHall" class="value text-ellipsis">影厅</span>
                </div>
                <div class="info-item">
                    <span>版本 :</span>
                    <span id="filmLan" class="value text-ellipsis">-</span>
                </div>
                <div class="info-item">
                    <span>场次 :</span>
                    <span class="value text-ellipsis screen">-</span>
                </div>
                <div class="info-item">
                    <span>票价 :</span>
                    <span class="value text-ellipsis">￥30/张</span>

                </div>
            </div>

            <div class="ticket-info">
                <div class="no-ticket">
                    <p class="buy-limit">座位: 一次最多选5个座位</p>
                    <p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
                </div>
                <div class="has-ticket" style="display:none">
                    <span class="text">座位：</span>
                    <div class="ticket-container" data-limit="5"></div>
                </div>

                <div class="total-price">
                    <span>总价 :</span>
                    <span class="price">0</span>
                </div>
            </div>

            <div class="confirm-order">
                <div class="cellphone">
                    <span>手机号 :</span>
                    <span class="phone-num">-</span>
                </div>
                <button class="confirm-btn disable" data-act="confirm-click" data-bid="b_0a0ep6pp"
                        onclick="submit()">确认选座
                </button>

            </div>
        </div>
    </div>
    <div class="modal-container" style="display:none">
        <div class="modal">
            <span class="icon"></span>

            <p class="tip"></p>

            <div class="ok-btn btn">我知道了</div>
        </div>
    </div>

</div>


</div>


<script src="./js/index.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="js/urlTools.js"></script>
<script src="./js/ticketing.js"></script>


</body>

</html>